<template>
  <div class="nav">
    <el-button type="primary" @click="back()">返回商品页面</el-button>
    <el-button type="primary" @click="batchAdd=true" icon="el-icon-s-goods" >批量结算</el-button>
    <el-button type="danger" round @click="deleteGoods()" icon="el-icon-delete-solid">批量删除</el-button>
    <template>
      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"

      >
        <el-table-column
            type="selection"
            width="55" align="center">
        </el-table-column>
        <el-table-column
            prop="id"
            label="商品编号"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="typeId"
            label="商品分类"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="brandId"
            label="商品品牌"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="modelId"
            label="商品型号"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="colourId"
            label="商品颜色"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="goodNumber"
            label="购买数量"
            width="120" align="center">
        </el-table-column>
        <el-table-column
            prop="goodPrice"
            label="商品单价"
            width="120" align="center">
        </el-table-column>

        <el-table-column prop="goodMoney" label="金额" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.goodNumber * scope.row.goodPrice }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template v-slot="scope">
            <el-input-number :step="scope.row.step" :min="1" :max="100"
                             v-model="scope.row.goodNumber"></el-input-number>
            <el-button type="primary" plain icon="el-icon-s-goods"
                       @click="dialogFormVisible =true,settlement(scope.row)"
            >结算
            </el-button>
            <el-button type="danger" round @click="deleteGoodsById(scope.row)" icon="el-icon-delete-solid">删除商品
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--模态框弹出-->
    <el-dialog title="销售订单详情" :visible.sync="dialogFormVisible" width="80%">
      <h4>订单基本资料</h4>
      <el-form :model="orderInfoSum" :inline="true" :rules="rules" ref="formData" label-width="80px"
               class="demo-ruleForm">
        <el-form-item label="订单类型" prop="orderType">
          <el-select placeholder="请选择" v-model="orderInfoSum.orderType">
            <el-option
                v-for="(key,value) in orderTypeList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethodId">
          <el-select placeholder="请选择" v-model="orderInfoSum.paymentMethodId">
            <el-option
                v-for="(key,value) in payTypeList"
                :key="key"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="businessType">
          <el-select placeholder="请选择" v-model="orderInfoSum.businessType">
            <el-option
                v-for="(key,value) in businessTypeList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单动作" prop="orderAction">
          <el-select placeholder="请选择" v-model="orderInfoSum.orderAction">
            <el-option
                v-for="(key,value) in orderActionlist"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderAction">
          <el-select placeholder="请选择" v-model="orderInfoSum.orderStatus">
            <el-option
                v-for="(key,value) in orderStatusList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收货人姓名" size="mini" prop="receiverName">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="orderInfoSum.receiverName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="会员账号" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="orderInfoSum.vipId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="自提时间" size="mini">
          <el-date-picker
              type="datetime"
              is-range
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="orderInfoSum.selfMentiontime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="orderInfoSum.receiverTelephone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系手机" size="mini" prop="receiverPhone">

          <el-input autocomplete="off" v-model="orderInfoSum.receiverPhone"></el-input>

        </el-form-item>
        <el-form-item label="邮政编码" size="mini">

          <el-input autocomplete="off" v-model="orderInfoSum.postalCode "></el-input>

        </el-form-item>
        <el-form-item label="收货地址" size="mini" prop="receiverAdress">
          <el-input autocomplete="off" v-model="orderInfoSum.receiverAdress"></el-input>
        </el-form-item>

        <el-form-item label="是否同城" size="mini">
          <el-select class="form-control" v-model="orderInfoSum.deliverySamecity">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
          <!--          <el-input autocomplete="off" v-model="orderInfoSum.deliverySamecity"></el-input>-->
        </el-form-item>
        <el-form-item label="是否购买保险" size="mini">
          <el-select class="form-control" v-model="orderInfoSum.deliveryInsurance">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
          <!--          <el-input autocomplete="off" v-model="orderInfoSum.deliverySamecity"></el-input>-->
        </el-form-item>

        <el-form-item label="电子邮箱" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="orderInfoSum.receiverEmail"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="汇款人" size="mini" prop="payName">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="orderInfoSum.payName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="orderInfoSum.receiverNotation"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">返回</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,transfer()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
<!--   批量结算 --------------------------------------------------------------------->
    <!--模态框弹出-->
    <el-dialog title="销售订单详情" :visible.sync="batchAdd" width="80%">
      <h4>订单基本资料</h4>
      <el-form :model="goodInfo" :inline="true" :rules="rules" ref="formData" label-width="80px"
               class="demo-ruleForm">
        <el-form-item label="订单类型" prop="orderType">
          <el-select placeholder="请选择" v-model="goodInfo.orderType">
            <el-option
                v-for="(key,value) in orderTypeList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethodId">
          <el-select placeholder="请选择" v-model="goodInfo.paymentMethodId">
            <el-option
                v-for="(key,value) in payTypeList"
                :key="key"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="businessType">
          <el-select placeholder="请选择" v-model="goodInfo.businessType">
            <el-option
                v-for="(key,value) in businessTypeList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单动作" prop="orderAction">
          <el-select placeholder="请选择" v-model="goodInfo.orderAction">
            <el-option
                v-for="(key,value) in orderActionlist"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderAction">
          <el-select placeholder="请选择" v-model="goodInfo.orderStatus">
            <el-option
                v-for="(key,value) in orderStatusList"
                :key="value"
                :label="key"
                :value="value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收货人姓名" size="mini" prop="receiverName">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="goodInfo.receiverName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="会员账号" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="goodInfo.vipId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="自提时间" size="mini">
          <el-date-picker
              type="datetime"
              is-range
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="goodInfo.selfMentiontime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="goodInfo.receiverTelephone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系手机" size="mini" prop="receiverPhone">

          <el-input autocomplete="off" v-model="goodInfo.receiverPhone"></el-input>

        </el-form-item>
        <el-form-item label="邮政编码" size="mini">

          <el-input autocomplete="off" v-model="goodInfo.postalCode "></el-input>

        </el-form-item>
        <el-form-item label="收货地址" size="mini" prop="receiverAdress">
          <el-input autocomplete="off" v-model="goodInfo.receiverAdress"></el-input>
        </el-form-item>

        <el-form-item label="是否同城" size="mini">
          <el-select class="form-control" v-model="goodInfo.deliverySamecity">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
          <!--          <el-input autocomplete="off" v-model="orderInfoSum.deliverySamecity"></el-input>-->
        </el-form-item>
        <el-form-item label="是否购买保险" size="mini">
          <el-select class="form-control" v-model="goodInfo.deliveryInsurance">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
          <!--          <el-input autocomplete="off" v-model="orderInfoSum.deliverySamecity"></el-input>-->
        </el-form-item>

        <el-form-item label="电子邮箱" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="goodInfo.receiverEmail"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="汇款人" size="mini" prop="payName">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="goodInfo.payName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注" size="mini">
          <el-col :span="30">
            <el-input autocomplete="off" v-model="goodInfo.receiverNotation"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchAdd = false" size="mini">返回</el-button>
        <el-button type="primary" @click="batchAdd = false,batchAddOrder()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import index from "./index"

export default index
</script>

<style scoped>

</style>
<!--插槽-->
<!--        <template v-slot="obj">-->
<!--        </template>-->
<!--:step="scope.row.step" :min="scope.row.min" :max="scope.row.max" v-model="scope.row.num-->